标签: angular6

随着Angular6的发布,他们增加了一个新的命令添加.任何人都可以告诉我现有command npm install <package>和现有的区别ng add <package>

试图让angular-cli识别出多个配置 angular.json

C:\_dev\myapp>ng serve --configuration development
Configuration 'development' could not be found in project 'myapp'.
Error: Configuration 'development' could not be found in project 'myapp'.

该片段是:

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

我有我的REST API,我把我的pdf文件,现在我希望我的角度应用程序通过我的网络浏览器点击下载,但我得到了HttpErrorResponse

"位于0的JSON中出现意外的标记%"

"SyntaxError:JSON.parse中位置0↵的JSON中出现意外的标记%(

这是我的终点

    @GetMapping("/help/pdf2")
public ResponseEntity<InputStreamResource> getPdf2(){

    Resource resource = new ClassPathResource("/pdf-sample.pdf");
    long r = 0;
    InputStream is=null;

    try {
        is = resource.getInputStream();
        r = resource.contentLength();
    } catch (IOException e) {
        e.printStackTrace();
    }

        return ResponseEntity.ok().contentLength(r)
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(is));

}

这是我的服务

  getPdf() {

this.authKey = localStorage.getItem('jwt_token');

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/pdf',
    'Authorization' : this.authKey,
    responseType : 'blob',
    Accept : 'application/pdf',
    observe : 'response'
  })
};
return this.http
  .get("http://localhost:9989/api/download/help/pdf2", httpOptions);

}

和调用

this.downloadService.getPdf()
  .subscribe((resultBlob: Blob) => …

我有这个代码app-routing.module.ts,根据角度的新文档,我通过该方法仍然没有工作,抛出一些我无法理解的错误.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AdminModule } from "./admin/admin.module";

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
 })
 export class AppRoutingModule { }

它抛出这样的错误.

我也试过像这样的旧方式 …

我试图托管独立的角度元素,我可以放入一个非角度的网页.当我只有一个时,它工作得很好..但是当我在同一页面上加载两个或更多时,我得到这个错误:

未捕获的错误:区域已加载.

我正在使用构建脚本将我的dist文件连接到一个js文件中......然后将其放入我的项目中

const fs = require('fs-extra')
const concat = require('concat')


const files = [
    './dist/elementsApp/runtime.js',
    './dist/elementsApp/polyfills.js',
    './dist/elementsApp/scripts.js',
    './dist/elementsApp/main.js',
]


fs.ensureDir('elements')
.then(() => {
  console.log('success!')
  concat(files, 'elements/include-me-somewhere-else.js')
})
.catch(err => {
  console.error(err)
})

我只能在一个页面上拥有这些js文件中的一个.我理解角度7将使整个过程更容易,但我想知道我现在能做到这一点.

我也尝试将导出的js文件包装在一个自动执行的函数中,以尝试限制范围.不幸的是,不修复任何东西.

有任何想法吗？

人们似乎对角元素是什么感到困惑.有关说明,您可以观看此视频https://www.youtube.com/watch?v=4u9_kdkvTsc.最后几分钟特别显示了一个角度元素被导出并包含在非角度页面上.我试图在同一页面上包含多个元素.

我正在尝试通过新的"providedIn"属性提供解析服务.

这是我在受保护模块中使用的翻译解析器:

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

import { Observable , pipe } from 'rxjs';
import {map} from "rxjs/operators";

//This is causing: "WARNING in Circular dependency detected:"
import {ProtectedModule} from "../../../protected/protected.module";

import { HttpHandlerService } from '../../http/http-handler.service';

@Injectable({
  providedIn: ProtectedModule //Over here (I need the import for this line)
})
export class TranslationsResolverService {
  constructor(private _httpHandlerService : HttpHandlerService) { }
    resolve(): any {
      //Do Something...
    }
}

我在受保护的路由模块中声明了翻译解析器服务:

import { NgModule }           from '@angular/core';
import {RouterModule, Routes} from '@angular/router'; …

我正在将Angular 5项目迁移到Angular 6.

在开始申请时

npm start

得到以下错误

 ** Angular Live Development Server is listening on localhost: 9000, 
open your browser on http://localhost:9000/ **
91% additional asset processing scripts-webpack-plugin× ?wdm?: 
Error: ENOENT: no such file or directory,open'\trunk\node_modules\jquery\dist\jquery.min.js'

我试过了

npm install jquery --save
npm install @types/jquery --save

什么都行不通

我检查了我的节点模块文件夹,我可以看到jquery文件

粘贴下面的package.json和angular.json

的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",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"@types/jquery": …

我正在创建一个角度库,使用角度6,它基于角度材料,我需要包括锤子js库.

我知道在角度6中我们可以angular.json在项目的配置下添加外部js库.但是这对于库来说不起作用.我尝试以下列方式添加外部库.

"my-library": {
  "root": "projects/my-library",
  "sourceRoot": "projects/my-library/src",
  "projectType": "library",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-library/tsconfig.lib.json",
        "project": "projects/my-library/ng-package.json",
        "scripts": [
          "../node_modules/hammerjs/hammer.min.js"
        ]
      }
    }
}

但是我收到了这个错误.

架构验证失败,出现以下错误:数据路径""不应具有其他属性(脚本).

请建议在角度库中添加外部js文件的正确方法是什么.

在角度5.2.x的http get和post我有这个代码:

post(url: string, model: any): Observable<boolean> {

return this.http.post(url, model)
  .map(response => response)
  .do(data => console.log(url + ': ' + JSON.stringify(data)))
  .catch(err => this.handleError(err));
 }
 get(url: string): Observable<any> {

return this.http.get(url)
  .map(response => response)
  .do(data =>
    console.log(url + ': ' + JSON.stringify(data))
  )
  .catch((error: any) => Observable.throw(this.handleError(error)));
 }

在角度6中,它不起作用.

我们如何发布HTTP帖子或获取请求？

使用Angular 6,下面是创建单例服务的首选方法:

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

来自Angular doc:当您在根级别提供服务时,Angular会创建一个HeroService的单个共享实例,并注入任何要求它的类.在@Injectable元数据中注册提供程序还允许Angular通过删除服务来优化应用程序(如果事实证明它不会被使用).

也,

providers: [
    // no need to place any providers due to the `providedIn` flag...
  ]

那么,这是否意味着我们不再需要CoreModule？我们可以将服务和其他常用模块直接导入AppModule.