কৌণিক 2/4/5 - বেস href গতিশীল সেট করুন

130

আমাদের কাছে একটি এন্টারপ্রাইজ অ্যাপ রয়েছে যা ক্লায়েন্টের জন্য কৌনিক 2 ব্যবহার করে। আমাদের প্রতিটি গ্রাহকের নিজস্ব অনন্য ইউআরএল রয়েছে, প্রাক্তন: https://our.app.com/customer-oneএবং https://our.app.com/customer-two। বর্তমানে আমরা <base href...>গতিশীলভাবে ব্যবহার করে সেট করতে সক্ষম হয়েছি document.location। সুতরাং ব্যবহারকারী হিট করে https://our.app.com/customer-twoএবং <base href...>সেট হয়ে যায় /customer-two... নিখুঁত!

সমস্যাটি যদি ব্যবহারকারী উদাহরণস্বরূপ থাকে https://our.app.com/customer-two/another-pageএবং তারা পৃষ্ঠাটি রিফ্রেশ করে বা সরাসরি সেই ইউআরএল হিট করার চেষ্টা করে তবে <base href...>সেটগুলি সেট হয়ে যায় /customer-two/another-pageএবং সংস্থানগুলি পাওয়া যায় না।

আমরা নিম্নলিখিত চেষ্টা করেও কোনও লাভ হয়নি:

<!doctype html>
<html>

<head>
  <script type='text/javascript'>
    var base = document.location.pathname.split('/')[1];
    document.write('<base href="https://stackoverflow.com/' + base + '" />');
  </script>

...

দুর্ভাগ্যক্রমে আমরা ধারণা থেকে সতেজ। কোন সাহায্যের আশ্চর্যজনক হবে।

angular

— sharpmachine
সূত্র

1

আপনি কি APP_BASE_HREF দিয়ে কিছু চেষ্টা করেছেন ? এটি কীভাবে কার্যকর করা হবে তা সম্পর্কে আমি পুরোপুরি নিশ্চিত নই, তবে এটি কার্যকর হতে পারে এমন কিছু বলে মনে হচ্ছে ...

— জারোদ মোসার

অবশ্যই আপনি বর্তমানে রাউটারের যে সংস্করণটি ব্যবহার করছেন তার উপর এটি অবশ্যই নির্ভর করে। আপনি কি রাউটার সংস্করণে 3.0.0-alpha.x?

— জারোদ মোসার

আমি "@ কৌণিক / রাউটার" ব্যবহার করছি: "3.0.0-alpha.7"

— শার্পম্যাচাইন

5

কৌণিক 7 - নভেম্বর 2018. এটি এখনও একটি সমস্যা। বর্তমান উত্তরগুলি একটি আংশিক সমাধান সরবরাহ করে। কৌণিক মডিউল ভিতরে স্টাফ করা খুব দেরী। আপনার সূচক এইচটিএমএল হিসাবে পরিবেশন করা হচ্ছে এটি থেকে স্ক্রিপ্টগুলি কোথায় টানতে হবে তা জানতে হবে। এটিকে দেখানোর জন্য কেবলমাত্র 2 টি উপায় রয়েছে asp এসপি h পিএইচপি using ডায়নামিক বেসহরিফ সামগ্রী সহ সূচক html পরিবেশন করা যাই হোক না কেন। বা কৌণিক হয়ে যাওয়ার আগে ডম ডট বিষয়বস্তু পরিবর্তন করতে সরাসরি সূচক। html ফাইলে নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে। উভয়ই একটি সাধারণ সমস্যার দুর্বল সমাধান। দু: খিত।

— স্ট্যাভম

1

কেউ দয়া করে আমার প্রশ্নের উত্তরও দিতে পারেন। stackoverflow.com/questions/53757931/…

— করণ

166

এখানে চিহ্নিত উত্তরটি আমার সমস্যাটি সমাধান করে না, সম্ভবত বিভিন্ন কৌণিক সংস্করণ। আমি angular cliটার্মিনাল / শেল এ নিম্নলিখিত কমান্ড দিয়ে কাঙ্ক্ষিত ফলাফল অর্জন করতে সক্ষম হয়েছি :

ng build --base-href /myUrl/

ng build --bh /myUrl/ অথবা ng build --prod --bh /myUrl/

পরিবর্তন করেন <base href="https://stackoverflow.com/">করার <base href="https://stackoverflow.com/myUrl/">মধ্যে নির্মিত সংস্করণ শুধুমাত্র যা উন্নয়ন ও উৎপাদন মধ্যে পরিবেশে আমাদের পরিবর্তনের জন্য নিখুঁত ছিল। সেরা অংশটি কোনও কোড বেস ছিল না এই পদ্ধতিটি ব্যবহার করে পরিবর্তনের প্রয়োজন।

সংক্ষিপ্তসার হিসাবে, আপনার index.htmlবেস href হিসাবে এটি ছেড়ে : <base href="https://stackoverflow.com/">তারপর ng build --bh ./এটি একটি আপেক্ষিক পথ হিসাবে কৌণিক ক্লিপ সঙ্গে চালান , বা ./আপনার প্রয়োজন যা প্রতিস্থাপন ।

হালনাগাদ:

উপরের উদাহরণটিতে কমান্ড লাইন থেকে এটি কীভাবে করা যায় তা দেখানো হয়েছে, এখানে এটি কীভাবে আপনার কৌনিক.জসন কনফিগারেশন ফাইলে যুক্ত করা যায়।

এটি ng servingস্থানীয় উন্নয়নের জন্য সকলের জন্য ব্যবহৃত হবে

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/testurl/",

প্রোডের মতো কনফিগারেশন তৈরির জন্য এটি কনফিগারেশন নির্দিষ্ট:

"configurations": {
   "Prod": {
     "fileReplacements": [
        {
          "replace": src/environments/environment.ts",
          "with": src/environments/environment.prod.ts"
        }
      ],
      "baseHref": "./productionurl/",

সরকারী angular-cli ডকুমেন্টেশন ব্যবহার উল্লেখ।

— Zze
সূত্র

35

এই সমাধানটির জন্য গ্রাহক প্রতি বিল্ড প্রয়োজন, যা সম্ভবত ওপি'র সমস্যা সমাধান করছে না।

— ম্যাক্সিমিম মরিন

1

আমার অভিজ্ঞতায় এখন পর্যন্ত @ ম্যাক্সিমোমরিন এটি ./করে সমস্ত অবস্থানের জন্য কাজ করে। সুতরাং আসলে আমি মনে করি না আপনি প্রতি ক্লায়েন্ট তৈরি করতে হবে।

— জেড

9

@ জজে এর সাথে আমার অভিজ্ঞতা ./অনেক আলাদা। ব্যবহারকারী কোনও রুটে নেভিগেট না করা এবং ব্রাউজারের রিফ্রেশ বোতাম বা কীগুলিতে আঘাত না করা পর্যন্ত এটি কাজ করে। এই মুহুর্তে, আমাদের পুনর্লিখনগুলি কলটি পরিচালনা করে, সূচী পৃষ্ঠাটি পরিবেশন করে তবে ব্রাউজারটি ধরে নেয় যে ./বর্তমান রুটটি ওয়েব অ্যাপের মূল ফোল্ডার নয়। আমরা ওপি'র সমস্যাটিকে একটি গতিশীল (.aspx, .php, .jsp, ইত্যাদি) সূচক দিয়ে সমাধান করেছি যা বেস href সেট করে।

— ম্যাক্সিমিম মরিন

2

--prodবিল্ড চলাকালীন ব্যবহার করা আপনার base hrefমান পরিবর্তন করবে না , আপনার এটি সম্পর্কে এখানে কথা বলা উচিত নয়। আপনার ফোল্ডারে ডিফল্ট ফাইলের পরিবর্তে ফাইলটি ব্যবহার করতে --prodবলেangular-clienvironment.prod.tsenvironment.tsenvironments

— ম্যাটিউ ইওন

1

@ ম্যাটিউইন এটি কেবল প্রদর্শিত হচ্ছে --prodযেহেতু তারা ওপিতে মোতায়েনের কথা বলছিল তাই পতাকাটির সাথে সামঞ্জস্যপূর্ণ ।

— জেড

57

আমরা এখানে কি শেষ করেছি।

এটি সূচক html এ যুক্ত করুন। এটি <head>বিভাগে প্রথম জিনিস হওয়া উচিত

<base href="https://stackoverflow.com/">
<script>
  (function() {
    window['_app_base'] = '/' + window.location.pathname.split('/')[1];
  })();
</script>

তারপরে app.module.tsফাইলটিতে, { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }সরবরাহকারীর তালিকায় যুক্ত করুন :

import { NgModule, enableProdMode, provide } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';


import { AppComponent, routing, appRoutingProviders, environment } from './';

if (environment.production) {
  enableProdMode();
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
    routing],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
  ]
})
export class AppModule { }

— sharpmachine
সূত্র

ত্রুটি TS7017: এলিমেন্টটির স্পষ্টতই 'কোনও' টাইপ রয়েছে কারণ টাইপ 'উইন্ডো'র কোনও সূচক স্বাক্ষর নেই। useValue: (window as any) ['_app_base'] || '/'সহায়তা

— এরকান বুয়েলবুইল

সর্বশেষে এনজি 2-র জন্য সত্যিই কাজ করে না, কোনও সমাধান আছে কি? (খারাপ স্ক্রিপ্টের পথটি লোড করে, তবে ভাল স্ক্রিপ্টের পথটি, তবে মোবাইলে নয়)

— Amit 8

1

মন্তব্যটির জন্য সামগ্রীর দৈর্ঘ্য দীর্ঘ হওয়ায় এটি নীচে উত্তর হিসাবে যুক্ত করা হচ্ছে।

— কৃষ্ণন

1

@ আমিট দয়া করে নতুন এনজি 2-তে সহজ সমাধানের জন্য নীচে আমার উত্তরটি দেখুন।

— জেড 21

3

আপনি অন্যান্য ফাইলগুলির সাথে কীভাবে সমস্যাটি সমাধান করেছেন। আমার ব্রাউজারটি লোকালহোস্ট: 8080 / main.bundle.js লোড করার চেষ্টা করছে , তবে এটি আমার প্রসঙ্গপথটি পৃথক হওয়ার কারণে তা করতে পারে না? (এটি লোকালহোস্ট আনতে হবে : 8080 / হ্যালো / মেইন.বান্ডেল.জেএস। )

— সাসা

33

আপনার (@ শার্পম্যাচীন) উত্তরের ভিত্তিতে, আমি এটি আরও সামান্য রিফ্যাক্টর করতে সক্ষম হয়েছি, যাতে আমাদের কোনও ফাংশন হ্যাক করতে না হয় index.html।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent } from './';
import { getBaseLocation } from './shared/common-functions.util';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    {
        provide: APP_BASE_HREF,
        useFactory: getBaseLocation
    },
  ]
})
export class AppModule { }

এবং ./shared/common-functions.util.tsএতে রয়েছে:

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/').splice(1, 1);
    let basePath: string = (paths && paths[0]) || 'my-account'; // Default: my-account
    return '/' + basePath;
}

— কৃষ্ণান
সূত্র

1

সাব-ফোল্ডারে আমার অ্যাপ স্থাপন করা আছে। আমার ইউআরএল এখন এইরকম দেখাচ্ছে: http://localhost:8080/subfolder/myapp/#/subfolder/myrouteআপনার চেহারাটি কি এ জাতীয় দেখাচ্ছে? আপনি কি জানেন যে # এর পরে কীভাবে সাবফোল্ডারটি পরিত্রাণ পাবেন যাতে এটি ঠিক হয়ে যায় http://localhost:8080/subfolder/myapp/#/myroute?

— techguy2000

উহু. আমি মনে করি href বেস কেবল লোকেশনস্ট্রেজির জন্য প্রয়োজনীয়। আমার ক্ষেত্রে, আমি হ্যাশলোকেশনস্ট্রেজি ব্যবহার করছি। সুতরাং আমি এটি সেট করার প্রয়োজন নেই। লোকেশনস্ট্রেজি সহ রিফ্রেশ পরিচালনা করার জন্য আপনার কাছে কি বিশেষ কোড লেখা ছিল?

— techguy2000

1

হ্যাঁ, base hrefকেবল LocationStrategyএএফআইএকের জন্য প্রয়োজনীয় । লোকেশনস্ট্রেজির সাথে রিফ্রেশ পরিচালনা করার জন্য বিশেষ কোড লেখার জন্য, আপনি ঠিক কী বলতে চান তা নিশ্চিত হন না। আপনি কি জিজ্ঞাসা করছেন, আমার অ্যাপ্লিকেশনটিতে কোনও ক্রিয়াকলাপের সময় যদি আমার "বেস হ্রেফ" পরিবর্তন হয়? তারপরে, হ্যাঁ, আমাকে window.location.href = '/' + newBaseHref;এটির পরিবর্তনের দরকার ছিল এমন নোংরা কাজ করতে হয়েছিল। আমি এটি নিয়ে খুব বেশি গর্ববোধ করি না। এছাড়াও, একটি আপডেট দিতে, আমি আমার অ্যাপ্লিকেশনটিতে এই হ্যাক সমাধানগুলি থেকে সরে এসেছি কারণ এটি আমার জন্য একটি ডিজাইনের সমস্যা হয়ে উঠছিল। রাউটারের প্যারামগুলি পুরোপুরি সূক্ষ্মভাবে কাজ করে, তাই আমি এটিতে আটকেছি।

— কৃষ্ণন

1

appRoutingProviderকৃষ্ণন তোমার চেহারা কেমন? আমি দেখি গ্রহণযোগ্য উত্তর একই ব্যবহার করেছে; হতে পারে আপনি কেবল তার অনুলিপি করেছেন providers, তবে তা না হলে আপনি আমাকে একটি নমুনা দিতে পারেন বা এর উদ্দেশ্য বর্ণনা করতে পারেন? ডকুমেন্টেশন শুধুমাত্র importsমডিউল রাউটিং , কোনো রাউটিং-সম্পর্কিত প্রদানকারীরা (যতদূর আমি দেখতে পারেন) ব্যবহার করে না

— দ্য রেড মটর

@ কৃষ্ণান এটিকে কাজ করার জন্য

location /subfolder/myapp/ {         try_files $uri /subfolder/myapp/index.html;     }      location /subfolder2/myapp/ {         try_files $uri /subfolder2/myapp/index.html;     }

— এনজিএনএক্সের

24

./একই ডোমেন থেকে বেশ কয়েকটি অ্যাপ্লিকেশন তৈরি করার সময় আমি বর্তমান ওয়ার্কিং ডিরেক্টরিটি ব্যবহার করি :

<base href="./">

পার্শ্ব নোটে, আমি .htaccessপৃষ্ঠা পুনরায় লোডে আমার রাউটিংয়ে সহায়তা করতে ব্যবহার করি:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html [L]

— Daerik
সূত্র

2

.htaccessফাইলটির জন্য আপনাকে অনেক ধন্যবাদ

— শাহরিয়ার সিরাজ স্নিগ্ধো

8

এই উত্তরটি ভুল, এটি / আপনার-অ্যাপ / এ / বি / সি এর মতো রুটের জন্য কাজ করে না। আপনি যদি এই জাতীয় কোনও রুট থেকে আপনার পৃষ্ঠাটি রিফ্রেশ করেন তবে কৌনিকটি রানটাইম, পলিফিলস এবং প্রধান জেএস ফাইল এবং শৈলীগুলির সিএসএস ফাইল আপনার / অ্যাপ / এ / বি / এর অধীনে সন্ধান করবে। তারা অবশ্যই স্পষ্টত সেই জায়গায় নয়, তবে / আপনার অ্যাপ্লিকেশন /

— ই

2

@ টুনজর্জেস এই উত্তরটি প্রায় দু'বছর আগে একটি কনফিগারেশন ফাইল ব্যবহার করে লেখা হয়েছিল যা অ্যাপাচি ওয়েব সার্ভার সফ্টওয়্যার দ্বারা পৃষ্ঠা পুনরায় লোডে রাউটিং পরিচালনা করার জন্য সনাক্ত এবং সম্পাদিত হয়েছিল। আপনার বলার জন্য এই সমাধানটি ভুল এবং কাজ করে না তা বিভ্রান্তিমূলক, তবে আপনার অর্থ হ'ল এটি আপনার কনফিগারেশনের সাথে কীভাবে কাজ করা যায় তা কীভাবে নির্ধারণ করতে পারছেন না।

— দেরিক

আমি অ্যাপাচি পুনর্লিখনের নিয়মটিকে উপেক্ষা করেছি এবং এটি সম্পর্কে আমি এ সম্পর্কে যথেষ্ট পরিমাণে জানিনা যে এটি অ্যাপাচে কাজ করবে না, তাই আমি ভুল হতে পারি এবং আপনার উত্তর সঠিক হতে পারে। যদিও যে কোনও ক্ষেত্রে আমি এমন একটি সমাধান পছন্দ করি যার জন্য আপনাকে এখানে সার্ভারের কনফিগারেশনটি সংশোধন করতে হবে না কারণ এখানে একাধিক উত্তর দেওয়া হয়েছে, কারণ এটি বিভিন্ন সার্ভারের মধ্যে অ্যাপ্লিকেশনটিকে পোর্টেবল করে তোলে।

— টনওর্জেজগুলি

2

নাহ, @ টঙ্গোর্জেস ঠিক আছে, পরিবর্তিত করা <base href="./">ভুল এবং /app/a/b/cসত্যিকারের মতো রুটগুলি সহকারে আপ করতে হবে, এটি কেবল পরীক্ষিত। কেবলমাত্র কোনও ওয়েব অ্যাপ্লিকেশানের সাথে ডিল করলে বা বেসে href স্থাপনের সময় কৌণিক উপায়টি একবার দেখে নিন (এখানে উল্লেখ করার জন্য এখানে প্রচুর উত্তর রয়েছে) নিজেকে বেস href সেট করতে পছন্দ করুন।

— জিওভান্নিপ্ডস

15

@ শার্পমাচাইন দ্বারা বিদ্যমান উত্তরের সরলীকরণ ।

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
    providers: [
        {
            provide: APP_BASE_HREF,
            useValue: '/' + (window.location.pathname.split('/')[1] || '')
        }
    ]
})

export class AppModule { }

আপনি যদি APP_BASE_HREF অস্বচ্ছ টোকেনের জন্য মান সরবরাহ করে থাকেন তবে আপনাকে আপনার সূচক html এ একটি বেস ট্যাগ নির্দিষ্ট করতে হবে না।

— করণভীর কঙ্গ
সূত্র

10

উন্নত পরিবেশে আমার জন্য এই কাজটি সূক্ষ্ম

<base href="https://stackoverflow.com/" id="baseHref">
<script>
  (function() {
    document.getElementById('baseHref').href = '/' + window.location.pathname.split('/')[1] + "/";
  })();
</script>

— Avikar
সূত্র

2

আইআইএসে একাধিক ভিডি সেটআপ সহ এই সমাধানটির দুর্দান্ত সীমাবদ্ধতা রয়েছে। এটি খণ্ডগুলি এর সদৃশ লোড কারণ।

— করণ

9

কৌণিক 4 এ, আপনি .angular-cli.json অ্যাপ্লিকেশনগুলিতে বেসহ্রেফটিও কনফিগার করতে পারেন।

in .angular-cli.json

{   ....
 "apps": [
        {
            "name": "myapp1"
            "baseHref" : "MY_APP_BASE_HREF_1"
         },
        {
            "name": "myapp2"
            "baseHref" : "MY_APP_BASE_HREF_2"
         },
    ],
}

এটি ইনডেক্স html এ বেস href কে MY_APP_BASE_HREF_1 এ আপডেট করবে

ng build --app myapp1

— ভিন্স
সূত্র

4

এটি প্রতিটি অ্যাপ্লিকেশন জন্য একটি বিল্ড করা প্রয়োজন।

— প্যাট্রিক হিলার্ট

6

আপনি যদি কৌণিক সিএলআই 6 ব্যবহার করে থাকেন তবে আপনি কৌনিক.জসন (প্রকল্পগুলি> এক্সএক্সএক্সএক্স> আর্কিটেক্ট> বিল্ড> কনফিগারেশন> উত্পাদন) এ ডিপ্লয়ে ইউআরএল / বেসহ্রেফ বিকল্পগুলি ব্যবহার করতে পারেন। এইভাবে, আপনি সহজেই প্রতিটি প্রকল্পের জন্য বেসউরল নির্দিষ্ট করতে পারেন।

অন্তর্নির্মিত অ্যাপ্লিকেশনের সূচক html দেখে আপনার সেটিংস সঠিক কিনা তা পরীক্ষা করুন।

— Katlu
সূত্র

7

এর জন্য প্রতিটি পরিবেশের জন্য এর সমস্ত প্রভাবের জন্য আলাদা বিল্ড প্রয়োজন।

— স্ট্যাভম

3

অ্যাড-অনস: যদি আপনি উদাহরণস্বরূপ চান: / ব্যবহারকারীরা রাউটারের জন্য অ্যাপ্লিকেশন বেস হিসাবে এবং / জনসাধারণকে সম্পদ ব্যবহারের জন্য বেস হিসাবে

$ ng build -prod --base-href /users --deploy-url /public

— 3rdi
সূত্র

1

একটি অনুরূপ সমস্যা ছিল, আসলে আমি আমার ওয়েবের মধ্যে কিছু ফাইলের অস্তিত্বের অনুসন্ধান করে শেষ করেছি।

প্রোবপথটি আপনার যে ফাইলটির জন্য পরীক্ষা করতে চান তার আপেক্ষিক ইউআরএল হবে (যদি আপনি এখন সঠিক অবস্থানে থাকেন তবে চিহ্নিতকারীর ধরণ), যেমন 'সম্পদ / চিত্র / এই আইমেজএলওয়েজ এক্সজিস্টস.পিএনজি'

<script type='text/javascript'>
  function configExists(url) {
    var req = new XMLHttpRequest();
    req.open('GET', url, false); 
    req.send();
    return req.status==200;
  }

  var probePath = '...(some file that must exist)...';
  var origin = document.location.origin;
  var pathSegments = document.location.pathname.split('/');

  var basePath = '/'
  var configFound = false;
  for (var i = 0; i < pathSegments.length; i++) {
    var segment = pathSegments[i];
    if (segment.length > 0) {
      basePath = basePath + segment + '/';
    }
    var fullPath = origin + basePath + probePath;
    configFound = configExists(fullPath);
    if (configFound) {
      break;
    }
  }

  document.write("<base href='" + (configFound ? basePath : '/') + "' />");
</script>

— রোনাল্ড কর্জে
সূত্র

-1

সত্যি বলতে গেলে, আপনার ক্ষেত্রে আমার পক্ষে কাজ করে!

আমি কৌনিক 5 ব্যবহার করছি।

<script type='text/javascript'>
    var base = window.location.href.substring(0, window.location.href.toLowerCase().indexOf('index.aspx'))
    document.write('<base href="' + base + '" />');
</script>

— Aviw
সূত্র

এই সমাধানটি কি আপনার পক্ষে কাজ করে? আমি সমস্যার মুখোমুখি হয়েছি। আপনি দয়া করে আমার পোস্টে উত্তর দিতে পারেন। stackoverflow.com/questions/53757931/…

— করণ

1

: Document.write () ব্যবহার এড়িয়ে যান developers.google.com/web/updates/2016/08/...

— প্যাট্রিক Hillert

-6

আমি সবেমাত্র পরিবর্তন করেছি:

  <base href="/">

এটি:

  <base href="/something.html/">

/ দিয়ে শেষ করতে ভুলবেন না

— হুই - লোগারিট
সূত্র