标签: angular-cli-v6

我一直在尝试使用Bootstrap 4.1.1和Angular 6在带有折叠菜单和下拉链接的Navbar上工作,但不知何故Navbar根本不工作.我可以正确地看到元素,但它们不能按预期运行.

我使用'ng install bootstrap --save'和Bootstrap依赖项通过Angular CLI安装了Bootstrap:'ng install jquery --save'和'ng install popper.js --save'

我还在package.json和angular.json中包含了Bootstrap,jquery和popper.js

的package.json:

"dependencies": {
  "@angular/animations": "^6.0.0",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "bootstrap": "^4.1.1",
  "core-js": "^2.5.4",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.3",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.6.0",
  "@angular/cli": "~6.0.0",
  "@angular/compiler-cli": "^6.0.0",
  "@angular/language-service": "^6.0.0",
  "@types/jasmine": "~2.8.6",
  "@types/jasminewd2": "~2.0.3",
  "@types/jquery": "^3.3.2",
  "@types/node": "~8.9.4",
  "codelyzer": "~4.2.1",
  "jasmine-core": "~2.99.1",
  "jasmine-spec-reporter": "~4.2.1",
  "karma": "~1.7.1",
  "karma-chrome-launcher": "~2.2.0",
  "karma-coverage-istanbul-reporter": "~1.4.2",
  "karma-jasmine": …

我正在使用超棒的4.70，Angular 6.0.8和cli 6.0.8（下面有完整版本），我正在尝试用cli的“ ng build”替换我们现有的webpack进程。我遇到了字体真棒图标无法显示的问题。过去，我曾在较旧的版本中看到过类似的问题，但是我还没有找到解决方案。

我将字体挂在我的资产中

assets:[
    "./node_modules/font-awesome/fonts",
    //other assets
]

我在angula.json的样式部分中加入了CSS

styles:[
    "./node_modules/font-awesome/css/font-awesome.css",
    //other styles
]

我不是在使用“ ng serve”，而是在使用build命令来编译我的代码。在浏览器中，我得到这些错误。

GET http：// localhost：29380 / fontawesome-webfont.woff2？v = 4.7.0 404（未找到）

GET http：// localhost：29380 / fontawesome-webfont.woff？v = 4.7.0 404（未找到）

GET http：// localhost：29380 / fontawesome-webfont.ttf？v = 4.7.0 404（未找到）

我在输出目录中看到了资产，但是由于某些原因，这些资产不可用，我得到了404。

我有一个包含Angularjs 1.5.8和angular 5.2.9的混合角度应用程序。我遵循了从AngularJS升级到Angular的步骤。运行正常。但是，将angular 5.2.9升级到angular 6.0.1之后，在期间出现错误ng serve。

error TS2503: Cannot find namespace 'angular'

如从AngularJS升级到Angular所述，我已经声明了“ angular”

declare var angular: angular.IAngularStatic;

将Angle从5.2.9升级到6.0.1时，我遵循了Angular Update Guide-5.2-> 6.0 for Advanced Apps的步骤

我该如何解决这个问题？

这是angular.json的一部分:

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }

我想要做的是控制开发环境.例如,更改sourceMap为false,我不想通过添加参数来做到这一点ng build.内部有没有相当于开发的内容productionangular.json？

还有一些非常重要的事情:在Angular-CLI 6中没有ng eject!那怎么可能看到并修改webpack.config.js呢？

我最近将我的 angular 应用程序更新到了最新版本。经过一夜的错误噩梦，除了 HMR 之外，我让一切正常。我被它深深地困住了。以下是我根据 Angular CLI wiki 上的 HMR 故事进行的配置：

angular.json

      "build": {
              "configurations": {
                "hmr": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.hmr.ts"
                    }
                  ]
                }
              }
            },
 "serve": {
          "configurations": {
            "hmr": {
              "hmr": true,
              "browserTarget": "appHit:build:hmr"
            },
          }
        },

hmr.js

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => …

我在 Angular6 中开发了一个项目。需要为实时聊天开发部分。为此，我在我的 asp.net 核心 Web Apiproject 中使用 SignalR。现在我想在我的 Angular 项目中使用这个 Web Api 参考。

我正在使用此链接。

但是在 App.Component.ts 中提供 Web Api url 时，我收到以下错误：

“HubConnection”类的构造函数是私有的，只能在类声明中访问。

应用组件.ts：

import { HubConnection } from '@aspnet/signalr';
import { Message } from 'primeng/api';

export class AppComponent implements OnInit {
  public _hubConnection: HubConnection;
  msgs: Message[] = [];
  constructor() {   
  }
  ngOnInit() {
    this._hubConnection = new HubConnection('http://localhost:1874/notify'); // getting error on this line.

编辑：尝试以下代码：-

修改后的 App.Component.ts ：

import { HubConnection } from '@aspnet/signalr';
import * as …

我正在开发一个角度应用程序，当我运行“ng test”命令时，它显示一些错误并显示“已断开连接（0 次），因为 30000 毫秒内没有消息”。'。我尝试更新 karma、jasmine 软件包并执行“npm install”，但仍然没有任何帮助。这里是依赖包和karma.conf.js文件。我在这里错过了什么吗？需要什么套餐升级吗？

"devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/animations": "^5.0.0",
    "@angular/cli": "~7.3.2",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.4.2",
    "husky": "^0.13.4",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "^1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "typescript-formatter": "^7.2.2",
    "webpack": "^4.9.2"
  },



module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false …

我已使用以下步骤将引导程序包含到我的 Angular 项目中

1. 使用 cli 创建角度项目
2. npm 安装 bootstrap@3 jquery --save
3. 然后像平常一样将脚本和样式路径添加到我的索引文件中

该样式未应用于我的页面。还有什么我必须做的吗？我正在从索引页添加 HTML 代码片段

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project</title>
  <script  src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>ewreeew</h1>
    <button class="btn btn-primary">Test Button</button>
  <app-root></app-root>
</body>
</html>

节点：8.11.2

操作系统：win32 x64

角度：6.0.5

...动画、常见、编译器、编译器-cli、核心、表单

... http、语言服务、平台浏览器

...平台浏览器动态、路由器

套餐版本

@Angular-devkit/架构师 0.6.8

@Angular-devkit/build-Angular 0.6.8

@Angular-devkit/构建优化器 0.6.8

@Angular-devkit/核心 0.6.8

@angular-devkit/schematics 0.6.8

@角度/cli 6.0.8

@ngtools/webpack 6.0.8

@schematics/角度0.6.8

@schematics/更新0.6.8

rxjs 6.2.1

打字稿 2.7.2

网页包 4.8.3 …

我的sitemap.xml文件assets夹中有这个文件src：

通过 cli 构建我的项目时ng build --prod，生成的文件夹如下所示：

我的问题只是在构建项目时如何将sitemap.xml文件移到文件assets夹外？

当我尝试在docker中构建angular7项目时，大约需要40分钟。需要40分钟的线路是

ng build --prod

92％大块资产优化TerserPlugin

我已经在同一台笔记本电脑上的docker外运行了build --prod，需要2分钟。

我尝试添加--build-optimizer false

和--sourceMap = false

没有任何区别

这是我的Dockerfile

FROM node:carbon
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
RUN npm install -g @angular/cli@6.1.0
COPY . .
RUN ng build --prod
EXPOSE 4200
CMD [ "npm", "start" ]
HEALTHCHECK --interval=5s --timeout=30s --retries=20 CMD curl --fail http://localhost:4200 || exit 1