1
我正在使用altair管理模板。試圖將其轉換爲angular2 spa。
我正在使用mgechev的angular-seed軟件包。
mgechev's angular-seed
外部js文件不能在角度2組件內工作
我的文件結構。 Click here to view image
這裏是我的index.html
<!DOCTYPE html>
<html lang="en" class="app_theme_g">
<head>
<base href="<%= APP_BASE %>">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no"/>
<link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-32x32.png" sizes="32x32">
<!--Title-->
<title>Resurgent</title>
<!-- uikit -->
<link rel="stylesheet" href="assets/admin/uikit/css/uikit.almost-flat.min.css" media="all">
<!--Login page-->
<link rel="stylesheet" href="assets/admin/css/login_page.min.css" />
<!-- flag icons -->
<link rel="stylesheet" href="assets/admin/icons/flags/flags.min.css" media="all">
<!-- style switcher -->
<link rel="stylesheet" href="assets/admin/css/style_switcher.min.css" media="all">
<!-- altair admin -->
<link rel="stylesheet" href="assets/admin/css/main.min.css" media="all">
<!-- themes -->
<link rel="stylesheet" href="assets/admin/css/themes/themes_combined.min.css" media="all">
<!-- matchMedia polyfill for testing media queries in JS -->
<!--[if lte IE 9]>
<script type="text/javascript" src="assets/admin/matchMedia/matchMedia.js"></script>
<script type="text/javascript" src="assets/admin/matchMedia/matchMedia.addListener.js"></script>
<link rel="stylesheet" href="assets/admin/css/ie.css" media="all">
<![endif]-->
<!--Loading Animation-->
<link rel="stylesheet" href="assets/loader.css">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<app-root>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</app-root>
<!-- google web fonts -->
<script>
WebFontConfig = {
google: {
families: [
'Source+Code+Pro:400,700:latin',
'Roboto:400,300,500,700,400italic:latin'
]
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- common functions -->
<script src="assets/admin/js/common.min.js"></script>
<!-- altair login page functions -->
<script src="assets/admin/js/pages/login.min.js"></script>
<!-- uikit functions -->
<script src="assets/admin/js/uikit_custom.min.js"></script>
<!-- altair common functions/helpers -->
<script src="assets/admin/js/altair_admin_common.min.js"></script>
<!--Seed Project Scripts-->
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<!-- shims:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script src="<%= APP_BASE %>app/system-config.js"></script>
<% } %>
<!-- libs:js -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.import('<%= BOOTSTRAP_MODULE %>')
.catch(function (e) {
console.error(e,'Report this error at https://github.com/mgechev/angular2-seed/issues');
});
</script>
<% } %>
</body>
</html>app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";
import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [
AuthComponent,
LoginComponent,
SignupComponent
],
exports: [
AuthComponent,
LoginComponent,
SignupComponent
],
providers: []
})
export class AuthModule { }個app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'auth',
templateUrl: 'auth.component.html',
styleUrls: ['auth.component.css'],
})
export class AuthComponent implements OnInit {
title: string = "hello";
ngOnInit() { }
}驗證模塊：
auth.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";
import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";
@NgModule({
imports: [
CommonModule,
RouterModule
],
declarations: [
AuthComponent,
LoginComponent,
SignupComponent
],
exports: [
AuthComponent,
LoginComponent,
SignupComponent
],
providers: []
})
export class AuthModule { }auth.compo nent.ts
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'auth',
templateUrl: 'auth.component.html',
styleUrls: ['auth.component.css'],
})
export class AuthComponent implements OnInit {
title: string = "hello";
ngOnInit() { }
}login.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'login',
templateUrl: 'login.component.html',
styleUrls: ['login.component.css'],
})
export class LoginComponent implements OnInit {
verticalBlocks: any;
title: string = "Login";
ngOnInit() {}
}login.component.html
除了外部JS
一切工作正常。 Javascripts無法正常工作。但是，css文件正在工作。 材料組件和模態其他JavaScript功能沒有什麼是在角度組件文件內工作。