1

我正在做一个 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 中调用它。这种方法还是不行。请帮忙。

4

0 回答 0