标签: angular-cli

我创建了一个angular-cli包含AppComponent的项目,如下所示:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

和app.component.html一样

<h1>
  Good Morning, {{title}}
</h1>

因此,当我使用ng build它生成它时会生成一些像这样的文件./dist/main.bundle.js,其中包含一些代码,如下所示 -

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

这意味着,在构建时,编译器/ bundle-er正在读取html文件并将它们连接到生成的js文件中.

但在我的情况下,html也是动态的,内容驱动的是服务器端.可以说,我的模板文件不是html,而是app.component.jsp,并且完全驻留在一些不同的服务器或文件夹上.

此JSP文件有时会返回<h1>Good Morning, {{title}}</h1> ,有时还<h1>Good Afternoon, {{title}}</h1>取决于当前的服务器时间.

如何实现这一功能？

我的理解是,我需要定义某种加载器函数说: loadDynamicTemplate(template_url) …

注意:我是Angular的新手,所以请原谅任何新来的愚蠢.

细节

• 我已经安装了最新版本的Angular CLI
• 'ng serve'后,默认应用加载并运行完全正常

问题

• 我决定创建一个新模块,将其导入到app模块中
• 这是我在Angular 2中做过几次的事情,它的工作非常好
• 但是,由于我今天早上运行了最新版本的Angular CLI,导入模块会中断并收到以下错误:

compiler.es5.js:1689未捕获错误:模块'ProjectsModule'导入的意外指令'ProjectsListComponent'.请添加@NgModule注释.

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { ProjectsModule } from './projects/projects.module';
import { HttpModule } from '@angular/http';


@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ProjectsModule,
    AngularFireModule.initializeApp(environment.firebase, 'AngularFireTestOne'), // imports firebase/app …

我有一个全新的Angular 4 CLI应用程序.运行之后:

npm install bootstrap@4.0.0-beta jquery popper.js --save

和编辑.angular-cli.json像这样:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js"
],

我在Chrome控制台中仍有问题:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
    at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25)

我该如何解决？

我正在使用最新的Angular CLI,并且我创建了一个自定义组件文件夹,它是所有组件的集合.

例如,TextInputComponent具有TextInputConfiguration其放在里面类src/components/configurations.ts,并且在src/app/home/addnewuser/add.user.component.ts其中予使用它有:

import {TextInputConfiguration} from "../../../components/configurations";

这很好,但随着我的应用程序变得越来越大,../我该如何处理？

以前,对于SystemJS,我将配置路径system.config.js如下:

System.config({
..
 map : {'ng_custom_widgets':'components' },
 packages : {'ng_custom_widgets':{main:'configurations.ts', defaultExtension: 'ts'},
)};

如何使用Angular CLI为webpack生成相同的内容？

如何将外部库中的资源包含到Angular CLI项目中

我正在尝试下面,但这不起作用,

  "assets": [
    "../node_modules/<external library>/assets/"
  ]

脚本工作正常,但是

 "scripts": [  
    "../node_modules/<external library>/some.js",     
    "startup.js"
 ]

角度版本:2.4.1

Angular CLI:1.0.0-beta.24

有什么建议吗？

我在Angular 5.2.5应用程序中使用Angular-CLI 1.6.6和@ angular/service-worker 5.2.5.除了在我们的生产环境中弹出一条错误消息外,一切在本地lite-server和生产服务器上都能正常工作:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

查看ngsw-worker.js脚本,我发现上面生成错误消息的行(2466):

async safeFetch(req) {
    try {
        return await this.scope.fetch(req);
    }
    catch (err) {
        this.debugger.log(err, `Driver.fetch(${req.url})`);
        return this.adapter.newResponse(null, {
            status: 504,
            statusText: 'Gateway Timeout',
        });
    }
} 

catch中的控制台日志记录错误会发出以下错误:

TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Driver.safeFetch (ngsw-worker.js:2464)
    at Driver.handleFetch (ngsw-worker.js:1954)
    at <anonymous>

与此问题相关的错误:导致'ServiceWorkerGlobalScope'上执行'fetch'失败的原因:'only-if-cached'只能设置为'same-origin'模式错误？

生成此错误的req是应用程序的任何首次访问:

https://example.com/test/#/connect
https://example.com/test/#/map?token=[accestoken]
...

在应用程序重新加载时,错误不会重复.

有人可以帮帮我吗？服务工作者的safeFetch()中是否存在错误(可能支持HashLocationStrategy)？我必须在配置中更改任何内容吗？

从版本开始，13.0.0将.angular在根目录中生成一个文件夹，该文件夹会被 git 忽略，其中包含一个cache缓存构建的文件夹。

如何删除（或清除）此缓存？

以下似乎没有做任何事情.

ng serve --ssl true --ssl-key <key-path> --ssl-cert <cert-path>

通过在默认的ssl目录中提供证书和密钥仍然无效.它看起来ng server完全忽略了--ssl参数并继续说NG Live Development Server is running on http://localhost:4200.

使用:

ng test

Angular CLI默认在Chrome中运行测试,这很棒,但是如果我需要在仅限控制台的环境(无头浏览器)中运行它们呢？

如果我可以指定我是否希望每次运行时都不需要浏览器,那将是很好的,所以类似于:

ng test --browsers MyHeadLessBrowser

编辑:

运行PhantomJS我得到以下内容:

PhantomJS 2.1.1(Linux 0.0.0)ERROR TypeError:useValue,useFactory,数据不可迭代!在http:// localhost:9876/_karma_webpack_/polyfills.bundle.js:854

eferenceError:在国际:找不到变量的http://本地主机:9876/_karma_webpack_/vendor.bundle.js(线49362)intlDateFormat @ HTTP://本地主机:9876/_karma_webpack_/vendor.bundle.js:49362:20

我刚刚完成了Angular CLI的全新安装,以便尝试一下,我不知道在命令行上导致以下错误的原因:

    PC:cobros Fran$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 95% emitting/Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40
        callbacks[i](err, result);
                    ^

TypeError: callbacks[i] is not a function
    at Storage.finished (/Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:40:15)
    at /Users/Fran/Documents/Workspace/Repos/cobros/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:77:9
    at /Users/Fran/Documents/Workspace/Repos/cobros/node_modules/graceful-fs/polyfills.js:287:18
    at FSReqWrap.oncomplete (fs.js:153:5)

这是我在尝试"ng -v"时返回的信息(如果它有用的话):

Angular CLI: 1.6.8
Node: 8.9.0
OS: darwin x64
Angular: 5.2.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8 …