标签: angular-webpack

我正在使用 Angular 14 和 Webpack 版本：^5.58.1。

下面是配置：

webpack.config.js

const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },

module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/, …

我想在构建生产()时从我的REST API URL(例如,http:// localhost:8080)中删除我的本地服务器前缀ng build --prod.

我知道它与环境文件有关environment.prod.ts,但是找不到任何使用它们来实现上述内容的例子.

如果有人帮我开始会很棒!

我最近更新了Angular 13我Angular 11需要的所有组件的最新版本，并且我正在努力让custom-webpack角度构建器在执行时运行ng serve。

在我的场景中，我通过自定义 Web 包插件 CSS Purge 执行 CSS 优化，因此让它正常工作对我来说至关重要，而且我确信这是可能的。然而，如果我ng build --configuration production这样做，它就像一个魅力，angular.json根本不会抱怨。

我执行时遇到的主要问题ng serve是出现以下错误：

Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(customWebpackConfig).

当前angular.json文件具有以下设置：

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "newwebsite-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": { …

我已将我的 Angular 项目从 6.0v 升级到 14.2.2v，并在执行ngserve之后后，我面临以下错误。我尝试删除 node_modules 并再次安装，我还尝试安装最新的 @angular-devkit/build-angular 但它不起作用。

我面临的错误

Initial Chunk Files | Names   | Raw Size | Estimated Transfer Size
runtime.js          | runtime |  1.25 kB |               670 bytes

4 unchanged chunks

Build at: 2022-09-16T13:27:09.170Z - Hash: ab7f7874267f0b08 - Time: 18413ms

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

Error: …

我用的是角度6。

我想在 PROD 中调试应用程序，我需要源映射。当我创建带有源映射的构建时，它会在缩小文件的末尾注入 URL，如下所示

//# sourceMappingURL=app.min.js.map

这使得浏览器调用源映射并且代码在产品中可见。

问题是如何制作源映射但不包含 URL？

我可以使用 gulp 和其他工具作为后期构建来做到这一点，但是有没有任何开箱即用/简单的方法？

免责声明：是的，我看到有更多与“为组件 AppComponent 指定的模板不是字符串”相关的问题，但没有一个问题描述了我遇到的具体问题。

当我在ng build中不使用 AoT 进行编译时，出现此运行时错误：

Uncaught Error: The template specified for component AppComponent is not a string

这个错误实际上是有道理的，因为在生成的捆绑代码（main.ts）中我看到：

template: __webpack_require__(/*! raw-loader!./app.component.html */ "../node_modules/raw-loader/dist/cjs.js!../Scripts/app/app.component.html"),

在新的 Angular 应用程序中我看到：

template: __webpack_require__(/*! ./app.component.html */ "./src/app/app.component.html")

不知何故，原始加载程序作为加载程序添加到我的 .html 文件中。

现在也许重要的是要提到我正在将我的 webpack 4 AngularJs 项目迁移到 Angular 8。但是当我调试我的 webpack 构建时，我没有看到它的测试包含.html和加载器的规则。包含raw-loader。

loader规则调试图

所以我的加载器规则不会影响 app.component.html 中的原始加载器添加

应用程序组件.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
} …