我正在做一个 Angular 项目。我得到了一个带有捆绑 css 和 js 文件的 HTML 模板。
首先,我将它们放在angular.json中并进行正常路由(直接从 app.routing.ts 路由每个组件)。这种方法效果很好。加载了外部的js和css。
我在 angular.js 中的构建选项,
"options": {
"outputPath": "dist/myNewApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
],
"styles": [
"src/style.185e1449062630dae048.css"
],
"scripts": [
"src/main.dd20b1e2d0fc8a3dfde3.js"
]
},
我的 app.routing.ts,
export const routes: Routes = [
{
path: '',
redirectTo: 'index',
pathMatch: 'full',
},
{
path: 'index',
component: IndexComponent,
data: {
title: 'Page Index'
}
},
...
但是在我将项目结构更改为延迟加载之后。bundle css 文件正常加载。但是没有加载JS文件。似乎 bundle js 文件中的每个函数都没有被触发(但浏览器的控制台仍然显示它是在 webpack 中加载的)。
下面是我真正使用的 app.routing.ts
export const routes: Routes = [
{
path: '',
loadChildren: () => import('./layout/layout.module').then(t => t.LayoutModule)
},
]
下面是我的 layout-routing.module.ts,
const routes: Routes = [
{
path: '', component: LayoutComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('../pages/index/index.module').then(t => t.IndexModule) },
{ path: 'faq', loadChildren: () => import('../pages/faq/faq.module').then(t => t.FaqModule) },
{ path: 'contact', loadChildren: () => import('../pages/contact/contact.module').then(t => t.ContactModule) },
]
},
];
webpack 显示它已加载,
我想念什么吗?我已经尝试将该 js 文件放在资产中并从 index.html 中调用它。这种方法还是不行。请帮忙。